<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane v-for="item of oneMaterielData" :key="item.fid" :label="item.fname" :name="item.fid + ''">
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="balance" />
          <el-button type="primary" class="btn" size="mini" @click="balance">{{ $t('btn.search') }}</el-button>
        </div>
        <jc-table
          v-loadmore="loadmore"
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="400px"
        >
          <el-table-column :label="$t('market.fmaterial')" prop="fnumber" align="center" width="120" />
          <el-table-column :label="$t('shop.fname2')" prop="fname" align="center" width="120" show-overflow-tooltip />
          <el-table-column :label="$t('shop.fspecificaTion')" prop="fspecificaTion" align="center" />
          <el-table-column :label="$t('market.fmodel')" prop="fmodel" align="center" show-overflow-tooltip />
          <el-table-column label="现有库存数量及库龄" align="center">
            <el-table-column label="30天以内" prop="inThreeQty" align="center" width="60" />
            <el-table-column label="30至60天" prop="inThreeAndSixQty" align="center" width="60" />
            <el-table-column label="60天以上" prop="inSixQty" align="center" width="60" />
            <el-table-column label="合计" prop="totalQty" align="center" width="60" />
          </el-table-column>
          <el-table-column label="上月耗用" prop="lastMonthQty" align="center" width="60" />
          <el-table-column label="前三个月平均" prop="averageQty" align="center" width="60" />
          <el-table-column label="采购周期" prop="poocycle" align="center" width="80" />
          <el-table-column label="30天内需补充的库存" prop="thirtyQty" align="center" width="80" />
          <el-table-column label="30-60天备料计划" prop="thirtyAndSixtyQty" align="center" width="80" />
          <el-table-column label="可用库存" align="center">
            <el-table-column label="15天" prop="fifteenStock" align="center" width="60" />
            <el-table-column label="15至30天" prop="fifteenAndThirtyStock" align="center" width="60" />
            <el-table-column label="30至60天" prop="thirtyAndSixtyStock" align="center" width="60" />
            <el-table-column label="60天以上" prop="sixtyStock" align="center" width="60" />
          </el-table-column>
          <el-table-column label="已下采购订单预计入库" align="center">
            <el-table-column label="15天内" prop="fifteenIn" align="center" width="60" />
            <el-table-column label="15至30天" prop="fifteenAndThirtyIn" align="center" width="60" />
            <el-table-column label="30至60天" prop="thirtyAndSixtyIn" align="center" width="60" />
            <el-table-column label="60天以上" prop="sixtyIn" align="center" width="60" />
          </el-table-column>
        </jc-table>
        <el-tabs v-model="activeName1" type="card" style="margin-top: 5px">
          <el-tab-pane v-if="LargeCode==='45'" label="餐台" name="first" />
          <el-tab-pane v-if="LargeCode==='45'" label="餐椅" name="second" />
          <el-tab-pane v-if="LargeCode==='45'" label="长凳" name="third" />
        </el-tabs>
        <div class="footer">
          <jc-pagination
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="balance"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import { queryRealTimeDataBalance } from '@/api/homePage/business'

export default {
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      ftype: 0,
      tableData: [],
      tableHeader: [],
      oneMaterielData: [
        { fname: 'BOM', fid: '45' },
        { fname: '工程', fid: '46' },
        { fname: '报价', fid: '47' }
      ],
      LargeCode: '45',
      activeName: '45',
      activeName1: '',
      currentPage: 1,
      size: 100,
      total: 0
    }
  },
  watch: {
    // 监听切换选项卡
    activeName(val) {
      this.tableData = []
      this.LargeCode = val
      this.balance()
    }
  },
  created() {
    // this.queryLargeList()
  },
  methods: {
    loadmore() {
      this.currentPage++
      this.balance()
    },
    // // 查询大类列表
    // async queryLargeList() {
    //   const { data: RES } = await queryLargeLists({})
    //   this.oneMaterielData = RES
    //   this.LargeCode = RES[0].fid
    //   this.activeName = RES[0].fid + ''
    //   this.balance()
    // },
    // 仓库原材料实时数据结存表
    balance() {
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        search: this.searCollData,
        fnumber: this.LargeCode
      }
      queryRealTimeDataBalance(DATA).then(res => {
        if (res.code === 0) {
          this.tableData.push(...res.data.array)
          this.total = res.data.total
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.header-name {
  position: relative;
  top: -5px;
  margin-bottom: 10px;
  .btn {
    margin-left: 450px;
    transform: translateY(18%);
  }
}
</style>

